T1.1_Sass 裝好了,可是 - -watch 不能用?


Posted by Christy on 2021-09-01

好吧,會寫這篇實在是因為昨天試了一整天,今天睡醒看到某篇文章頓悟了,想記錄以下幾個心得,提醒自己下次遇到安裝上的錯誤,有什麼可以從這一次獲得經驗。

前情提要:目前在程式導師計畫的 W13,本週預計學習一些前端工具,其中一個是 Sass,相關介紹可以參考 官網

Sass 是 css 的預處理器,意思就是說,可以使用寫程式語言的方式來寫 style sheet(也就是寫 SCSS 或者是 Sass),然後利用 Sass 這套軟體編譯成 css。

在安裝上,我犯的那些錯誤

以下記錄安裝上的錯誤,及使用的解決方法:

1.錯誤訊息:The operation was rejected by your operating system.

解決方法:在指令前面加上 sudo,sass 官網 的指令是 npm install -g sass,就輸入 sudo npm install -g sass

2.錯誤訊息:npm WARN saveError ENOENT: no such file or directory, open '/Users//package.json''

解決方法:參考 這裡

其實安裝到這裡,我懷疑是 node.js 版本有問題,所以把它刪除重新安裝

接著又修復了 To fix this warning, add a private: true to your package.json file,詳細做法可以參考這個 How to solve the npm WARN package.json: No repository field

3.錯誤訊息:dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib

我的環境是 mac,所以也試了 $brew install sass/sass/sass 這個指令。理論上來說,現在 Sass 全面推行 dart-sass,在這個指令下裝完應該就能執行了

可以參考這個 解答

嘗試了 $brew install rbenv/tap/openssl@1.0 以及 $brew reinstall openssl@1.0,裝到這裡其實非常灰心了,在想也許找替代方案來做吧,不見得一定要用 sass

替代方案:使用VSCode外掛自動編譯SASS/SCSS

4.隔天再試一次,終於成功了

主因是早上睡醒看到這篇 Compile SASS/SCSS From The Command Line

把它裡面的 Method 每個後面都加上 --force 再跑一遍,另外官網要求的設置路徑,我把檔案放在「應用程式」裡面,設置是長這樣:export PATH="/Applications/dart-sass/sass:$PATH"

整理一下,正常安裝 Sass 應該會是什麼樣?

a. 在 terminal 用 sass --version 時,應該會有 1.38.2 compiled with dart2js 2.13.4,如果只有 1.38.2,表示電腦裡面有 sass 但是 dart 沒有裝好

b. 官網最新的 dart-sass 下載對應檔案以後執行,並且設置 路徑

tips: 可以用 terminal open /Users/your-user-name/.bash_profile 找到 bash_profile 這個檔案,或用一個 nano 相關的指令可以直接修改並存擋。

安裝步驟其實 Compile SASS/SCSS From The Command Line 說得很詳細,可以照著跑跑看,我就不重複了。

我的學習與反思

a. 坦白說不是很確定到底哪個環節出了問題,但這樣一路更新下來,brew, node, npm 等等全部都被更新成最新版本了。

b. 假設真的無法使用,應該也有很多替代方案可以選擇,不要執著「一定要用這個工具」,有時轉個彎也很不錯。

c. 冷靜的把每一行 terminal 報的錯都看一遍,直接搜尋錯誤訊息。

d. 像這次的關鍵字,比較適合的是 'sass dart - - watch not working', 'remove ruby sass, install dart sass',可以找到一些相關資料。

e. 在安裝的時候不小心裝了 ruby 版本,只好刪掉重來,下次執行指令之前,要看仔細有可能會出現什麼結果?

以上就是這次的學習,環境問題真的有點煩人,期許自己下次遇到時能夠更好的解決。










Related Posts

Day 5 - Flex Panels Image Gallery

Day 5 - Flex Panels Image Gallery

【JS 專案 - 01】 今晚來點 TodoList...

【JS 專案 - 01】 今晚來點 TodoList...

筆記、程式設計概論

筆記、程式設計概論


Comments